<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用HTML DOM操作表格</title>
<style type="text/css">
 body{
     font-size:13px;
     line-height:25px;
 }
 table{
     border-top: 1px solid #333;
     border-left: 1px solid #333;
     width:300px;
 }
 td{
     border-right: 1px solid #333;
     border-bottom: 1px solid #333;
 }
 .center{
     text-align:center;
 }
 .title{
     text-align:center;
     font-weight:bold;
     background-color: #cccccc;
 }
 
</style>
<script>

 // 训练要点
 // （1）使用getElementById()方法查找html元素
 // （2）使用rows属性获取表格的行集合
 // （3）使用insertRow()方法插入行
 // （4）使用insertCell()方法插入单元格
 // （5）使用deleteRow()方法删除行
 // （6）使用className属性设置样式

 //--------------在此开始你的代码-----------------------
 





 //--------------在此结束你的代码-----------------------

</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
  <tr id="row1">
    <td>书名</td>
    <td>价格</td>
  </tr>
  <tr id="row2">
    <td>看得见风景的房间</td>
    <td class="center">&yen;30.00</td>
  </tr>
  <tr id="row3">
    <td>60个瞬间</td>
    <td class="center">&yen;32.00</td>
  </tr>
</table>
<input name="b1" type="button" value="增加一行" />
<input name="b2" type="button" value="删除第2行"/>
<input name="b3" type="button" value="修改标题"/>
</body>
</html>
